<template>
  <div id="read"></div>
</template>

<script>
import Epub from "epubjs";
import { ebookMixin } from "./../../utils/mixin";
global.epub = Epub;
export default {
  data() {
    return {
      TouchX: "111"
    };
  },
  mixins: [ebookMixin],
  methods: {
    prePage() {
      if (this.rendition) this.rendition.prev();
      this.HideMenu();
    },
    nextPage() {
      if (this.rendition) this.rendition.next();
      this.HideMenu();
    },
    ToggleMenu() {
      // this.$store.dispatch("setTitleShow", !this.titleShow);
      this.setFontSize(-1);
      this.setTitleShow(!this.titleShow);
      this.setFontFamilyVisible(false);
    },
    HideMenu() {
      // this.$store.dispatch("setTitleShow", false);
      this.setTitleShow(false)
    },
    initEpub() {
      const url = "http://192.168.2.85:8888/epub/" + this.filename + ".epub";
      //将电子书渲染出来
      this.book = new Epub(url);
      this.setCurrentBook(this.book);
      this.rendition = this.book.renderTo("read", {
        width: innerWidth,
        height: innerHeight,
        method: "default" //兼容微信
      });
      this.rendition.display();
      //  return filename;
      this.rendition.on("touchstart", event => {
        // console.log(this.aaa)
        this.TouchX = event.changedTouches[0].clientX;
        this.timeStamp = event.timeStamp;
        // console.log(this.TouchX);
      });
      this.rendition.on("touchend", event => {
        const offSetX = event.changedTouches[0].clientX - this.TouchX;
        const time = event.timeStamp - this.timeStamp;
        // console.log(offSetX, time);
        if (offSetX > 30 && time < 300) this.prePage();
        //上页
        else if (offSetX < -30 && time < 300) this.nextPage();
        //下页
        else {
          //显示菜单栏
          this.ToggleMenu();
        }
        event.stopPropagation();
        event.preventDefault();
      });
    }
  },
  mounted() {
    // this.$store
    //   .dispatch("setFileName", this.$route.params.filename.split("|").join("/"))
    //   .then(() => {
    //     this.initEpub();
    //   });
    this.setFileName(this.$route.params.filename.split("|").join("/"))
      .then(() => {
        this.initEpub();
      });
  }
};
</script>

<style></style>